<template>
	<div class="pwd_crad_box">
		<div class="card_header">
			<div class="header_info">
				<h3 class="title">{{ data.title }}</h3>
				<p class="url">{{ data.url }}</p>
				<p class="username">用户名: {{ data.name }}</p>
				<el-input
					v-model="pwd"
					:type="type"
					readonly
					class="pwd_input"
					style="width: 100%">
					<template #append>
						<div
							class="append"
							@click="show_pwd">
							<el-icon
								color="#409eff"
								v-if="show_pwd_flag"
								><Hide
							/></el-icon>
							<el-icon
								color="#409eff"
								v-else
								><View
							/></el-icon>
						</div>
					</template>
				</el-input>
			</div>
		</div>
		<hr class="divider" />
		<div class="card_content">
			<p class="note">备注：{{ data.remark }}</p>
		</div>
		<div class="card_footer">
			<el-button
				v-if="data.url"
				color="#00babd"
				plain
				@click="copy_url"
				>复制网址</el-button
			>
			<el-button
				type="primary"
				plain
				@click="copy_name"
				>复制用户名</el-button
			>
			<el-button
				type="success"
				plain
				@click="copy_pwd"
				>复制密码</el-button
			>
			<el-button
				color="#626aef"
				plain
				@click="edit_pwd"
				>编辑</el-button
			>
			<el-button
				type="danger"
				plain
				@click="delete_pwd"
				>删除</el-button
			>
		</div>
	</div>
</template>

<script setup>
	import { ref } from "vue";
	import { getData, decrypt } from "@/utils/encryption/index.js";
	import { my_message } from "@/utils/my_message/index.js";
	import { View, Hide } from "@element-plus/icons-vue";
	import { ElMessageBox } from "element-plus";
	import { Events } from "@/utils/events_bus/index.js";

	const msg = my_message();
	const props = defineProps({
		data: {
			type: Object,
			default: () => {},
		},
	});
	const emit = defineEmits(["edit_pwd", "delete_pwd"]);
	const pwd = ref(props.data.pwd);
	const show_pwd_flag = ref(false);
	const type = ref("password");

	const show_pwd = () => {
		show_pwd_flag.value = !show_pwd_flag.value;
		if (show_pwd_flag.value) {
			pwd.value = decrypt_pwd();
			type.value = "text";
		} else {
			pwd.value = props.data.pwd;
			type.value = "password";
		}
	};
	const decrypt_pwd = () => {
		let key = getData(null, "key");
		const key_part = Buffer.from(key).subarray(0, 32);
		const iv_part = Buffer.from(key).subarray(32, 48);
		const buffer_pwd = Buffer.from(props.data.pwd, "hex");
		const pwd = decrypt(buffer_pwd, key_part, iv_part).toString("utf8");
		return pwd;
	};
	const copy_url = () => {
		// 复制网址到剪贴板
		Events.send_reply("write_text", props.data.url)
			.then(() => {
				msg.msg_success("网址已复制到剪贴板！");
			})
			.catch(err => {
				msg.msg_error("复制失败！");
			});
	};
	const copy_name = () => {
		// 复制用户名到剪贴板
		Events.send_reply("write_text", props.data.name)
			.then(() => {
				msg.msg_success("用户名已复制到剪贴板！");
			})
			.catch(err => {
				msg.msg_error("复制失败！");
			});
	};
	const copy_pwd = () => {
		const pwd = decrypt_pwd();

		// 复制密码到剪贴板
		Events.send_reply("write_text", pwd)
			.then(() => {
				msg.msg_success("密码已复制到剪贴板！");
			})
			.catch(err => {
				msg.msg_error("复制失败！");
			});
	};
	const edit_pwd = () => {
		// 编辑密码
		emit("edit_pwd", props.data.id);
	};
	const delete_pwd = () => {
		// 删除密码
		ElMessageBox.confirm(
			"确定要删除这条记录吗？删除后将无法恢复，请谨慎操作！",
			"删除确认",
			{
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				center: true,
			}
		).then(() => {
			emit("delete_pwd", props.data.id);
		});
	};
</script>

<style lang="less" scoped>
	.pwd_crad_box {
		width: 100%;
		max-width: 800px;
		margin: 0 auto;
		padding: 20px;
		border: 1px solid #e0e0e0;
		border-radius: 8px;
		background-color: #fff;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

		.card_header {
			display: flex;
			align-items: center;
			margin-bottom: 15px;

			.avatar {
				width: 60px;
				height: 60px;
				border-radius: 50%;
				margin-right: 15px;
			}

			.header_info {
				width: 100%;
				.title {
					font-size: 18px;
					font-weight: bold;
					margin: 0;
				}

				.url {
					color: #666;
					margin: 5px 0;
				}

				.username {
					color: #999;
				}

				.pwd_input {
					width: 100%;
					.append {
						width: 50px;
						height: 100%;
						text-align: center;
						cursor: pointer;
					}
				}

				:deep(.el-input-group__append) {
					padding: 0;
				}
			}
		}

		.divider {
			border: none;
			border-top: 1px dashed #ccc;
			margin: 15px 0;
		}

		.card_content {
			margin-bottom: 15px;

			.note {
				color: #333;
			}
		}

		.card_footer {
			display: flex;
			justify-content: flex-end;
			gap: 10px;
		}

		&:hover {
			box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
			transform: translateY(-2px);
		}
	}
</style>
